<style>
	
	.pagetitle { width: 100%; text-align: center; color: darkorange; text-shadow: 1px 1px 5px #999;}
	.item { width: 60px; font-size: 14px; font-weight: 600; color: #666666; cursor: pointer; }
	.item:hover { color: red;}
	.item.choosed { color: darkorange;}
	
	.cities {width: 100%; height: 32px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; }
	.city { text-align: center;}
	.gyms { width: 100%; height: 90px; margin-top: 20px; flex-flow: row wrap; align-content: flex-start; overflow: auto;}
	.gym { width: 150px; height: 30px; font-size: 12px; margin-left: 20px;}
	.dates { width: 100%; height: 40px; margin-top: 10px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; justify-content: space-between; }
	.dates .item { text-align: center;}
	.date { width: 150px; font-size: 12px; text-align: center;}
	.memo { font-size: 10px; }
	

	
</style>
<section>
	<div class="" id="vm">
		<h3 class="pagetitle">快快门店每日课程表及预约、到店人数</h3>
		<div class="cities line">
			<div v-for="(item, i) in cities" :class="'city item ' + (item == city ? 'choosed' : '')" @click="choosecity(item)">{{item}}</div>
		</div>
		<div class="gyms line">
			<div v-for="(gym, i) in gyms" :class="'gym item ' + (gym.gym_id == gym_id ? 'choosed' : '')" @click="choosegym(gym.gym_id)">{{gym.gym_name}}</div>
		</div>
		<div class="dates line">
			<div class="item" @click="rolltime(-1)">前一天</div>
			<div v-for="(d, i) in dates" :class="'date item ' + (d == date ? 'choosed' : '')" @click="choosedate(d)">
				<div>{{d}}</div>
				<div>{{showWeek(d)}}</div>
			</div>
			<div class="item" @click="rolltime(1)">后一天</div>
		</div>
		<v-table style="width: 100%; margin-top: 2px;" 
			:height="550" is-horizontal-resize 
			:is-loading="isLoading" 
			:columns="date < today ? columns : columns.slice(0, columns.length - 1)"
			:table-data="timetable" 
			row-hover-color="#fff" 
			sort-always >
		</v-table>
		<div class="line" style="justify-content: space-between; height: 40px;">
			<div class="download"><button @click="download()">导出</button></div>
			<div class="memo">注：所有数据均截止到昨日。</div> 
		</div>
		
	</div>
	
</section>
<script>

	var vm = new Vue({
		el: '#vm',
		data: {
			gymsdatas: [],  
			cities: [], 	gyms: [], 		dates: [],
			city: C.city,  	gym_id: C.gymid, 	date: rd.dateAdd(Date(), -1),
			columns: [
				{field: "gymname", title: "门店", width: 100, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "start_time", title: "时间", width: 100, titleAlign: 'center', columnAlign:'center', isResize:true, formatter: function(d){return rd.dateAdd(d.start_time)} },
				{field: "subjectname", title: "科目", width: 100, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "coursename", title: "课程", width: 100, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "pre", title: "预约", width: 30, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "checkin", title: "签到", width: 30, titleAlign: 'center', columnAlign:'center', isResize:true, },
			],
			timetable: [],
			today: rd.dateAdd(new Date(), 0),
			isLoading: false,
			firstDate: -3, // 初始数据第一天为3天前, 决共显示10天
<<<<<<< HEAD

=======
>>>>>>> cba9cafd673f42ad5454652a82cea5b5ef9bdc87
		},
		methods: {
			choosecity: function(i){
				this.city = i;
				this.showgyms();
			},
			showgyms: function(){
				this.gyms = rd.subJson(this.gymsdatas, 'city', this.city);
			},
			choosedate: function(i){
				this.date = i;
				this.showtable();
			},
			showDates: function(){
				this.dates = [];
				for(let i = this.firstDate; i < 7 + this.firstDate; i++){
					this.dates.push(rd.dateAdd(Date(this.date), i))
				}
			},
			choosegym: function(i){
				console.log(i)
				this.gym_id = i;
				this.showtable();
			},
			showtable: function(){
				let that = this;
				this.isLoading = true;
<<<<<<< HEAD
				$.post('/data/post/ksap/gyms/timetable', {gym_id: this.gym_id, date: this.date}, function(r){
					console.log(r);
=======
				post(dataDomain + "data/post.php/ksap/gyms/timetable", 
					{"gym_id": this.gym_id, "date": this.date }, function(r){
					console.log(r.data);
>>>>>>> cba9cafd673f42ad5454652a82cea5b5ef9bdc87
					that.isLoading = false;
					that.timetable = r.data;
				})
			}, 	
			showWeek: function(d){
				let week = "日一二三四五六";
				if(rd.dateAdd(new Date(d), 0) == rd.dateAdd(new Date(), 0)){
					return '今天'
				}else{
					return '星期' + week[new Date(d).getDay()]
				}
			},
			rolltime: function(i){
				this.firstDate += i;
				this.date = rd.dateAdd(new Date(this.date), i);
				this.showDates();
				this.showtable();
			},
			download: function(){
				download(this.city + '门店' + this.date + '课程表-', this.columns, this.timetable);
			}
		},
		mounted: function(){
			let that = this;
			
<<<<<<< HEAD
			$.post('/data/post/ksap/gyms/gyms', function(r){
=======
			post(dataDomain + "data/post.php/ksap/gyms/gyms", {}, function(r){
>>>>>>> cba9cafd673f42ad5454652a82cea5b5ef9bdc87
				console.log(r)
				that.gymsdatas = r.data;
				that.cities = rd.distinctArray(r.data, 'city');
				that.showgyms();
			})
			this.showDates();
<<<<<<< HEAD
			
			$.post('/data/post/ksap/gyms/timetable',{gym_id: this.gym_id, date: this.date}, function(r){
				console.log(r.data)
				that.gymsdatas = r.data
				that.showtable();
			})
=======
>>>>>>> cba9cafd673f42ad5454652a82cea5b5ef9bdc87
		}
	})
</script>